{% extends 'base/base.html' %}
{% load static %}

{% block title %}盲盒商城 - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .filter-section {
        background-color: #ffffff;
        border-radius: 10px;
        padding: 25px;
        margin-bottom: 30px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .filter-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 20px;
        color: #333;
    }
    
    .filter-group {
        margin-bottom: 25px;
    }
    
    .filter-group:last-child {
        margin-bottom: 0;
    }
    
    .filter-label {
        font-weight: 600;
        margin-bottom: 15px;
        font-size: 1.1rem;
        color: #333;
    }
    
    .sort-select {
        padding: 10px 18px;
        border-radius: 20px;
        border: 1px solid #ced4da;
        font-weight: 500;
        font-size: 1rem;
        width: 100%;
        background-color: #fff;
    }
    
    .filter-select {
        padding: 10px 18px;
        border-radius: 20px;
        border: 1px solid #ced4da;
        font-weight: 500;
        font-size: 1rem;
        width: 100%;
        background-color: #fff;
    }
    
    .box-count {
        font-size: 1.1rem;
        font-weight: 500;
    }
    
    .empty-result {
        text-align: center;
        padding: 50px 0;
    }
    
    .empty-result-icon {
        font-size: 3rem;
        color: #6c757d;
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-5">
    <h1 class="mb-4">盲盒商城</h1>
    
    <!-- 筛选区域 -->
    <div class="filter-section">
        <h2 class="filter-title">筛选条件</h2>
        <form id="filterForm" method="get" action="{% url 'blindbox:list' %}">
            <div class="row">
                <!-- 分类筛选 -->
                <div class="col-md-4 filter-group">
                    <div class="filter-label">商品分类</div>
                    <select id="categorySelect" name="category" class="form-select filter-select" onchange="submitForm()">
                        <option value="" {% if not selected_category %}selected{% endif %}>全部分类</option>
                        {% for category in categories %}
                        <option value="{{ category }}" {% if selected_category == category %}selected{% endif %}>{{ category }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <!-- 超市筛选 -->
                <div class="col-md-4 filter-group">
                    <div class="filter-label">合作超市</div>
                    <select id="marketSelect" name="market_id" class="form-select filter-select" onchange="submitForm()">
                        <option value="" {% if not selected_market %}selected{% endif %}>全部超市</option>
                        {% for market in markets %}
                        <option value="{{ market.market_id }}" {% if selected_market == market.market_id|stringformat:'s' %}selected{% endif %}>{{ market.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <!-- 排序选择 -->
                <div class="col-md-4 filter-group">
                    <div class="filter-label">排序方式</div>
                    <select id="sortSelect" name="sort" class="form-select sort-select" onchange="submitForm()">
                        <option value="default" {% if selected_sort == 'default' or not selected_sort %}selected{% endif %}>默认排序</option>
                        <option value="price_asc" {% if selected_sort == 'price_asc' %}selected{% endif %}>价格从低到高</option>
                        <option value="price_desc" {% if selected_sort == 'price_desc' %}selected{% endif %}>价格从高到低</option>
                        <option value="sales" {% if selected_sort == 'sales' %}selected{% endif %}>销量优先</option>
                        <option value="newest" {% if selected_sort == 'newest' %}selected{% endif %}>最新上架</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    
    <!-- 商品数量显示 -->
    <div class="mb-4">
        <span class="box-count">共找到 <strong>{{ boxes.paginator.count }}</strong> 个盲盒商品</span>
    </div>
    
    <!-- 盲盒列表 -->
    <div class="row">
        {% for box in boxes %}
        <div class="col-md-3 mb-4">
            <div class="card h-100 border-0 shadow-sm box-card">
                <div class="box-image-container">
                    <img src="{{ box.image_url }}" alt="{{ box.name }}" class="box-image">
                    {% if box.has_discount %}
                    <span class="badge bg-danger badge-discount">
                        立省{{ box.discount_percentage }}%
                    </span>
                    {% endif %}
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{ box.name }}</h5>
                    <p class="card-text text-muted small mb-2">
                        {{ box.category|default:"未分类" }} | 已售 {{ box.sales }}
                    </p>
                    <div class="d-flex justify-content-between align-items-center mt-2">
                        <div>
                            {% if box.discount_price %}
                            <span class="text-danger fw-bold">¥{{ box.discount_price }}</span>
                            <small class="text-muted text-decoration-line-through ms-2">¥{{ box.original_price }}</small>
                            {% else %}
                            <span class="text-danger fw-bold">¥{{ box.original_price }}</span>
                            {% endif %}
                        </div>
                        <a href="{% url 'blindbox:detail' box_id=box.box_id %}" class="btn btn-sm btn-primary">
                            <i class="fas fa-eye me-1"></i>查看
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 empty-result">
            <div class="empty-result-icon">
                <i class="fas fa-box-open"></i>
            </div>
            <h3>未找到符合条件的盲盒</h3>
            <p class="text-muted">尝试更改筛选条件或稍后再来查看</p>
            <a href="{% url 'blindbox:list' %}" class="btn btn-primary mt-3">
                <i class="fas fa-redo me-2"></i>查看全部盲盒
            </a>
        </div>
        {% endfor %}
    </div>
    
    <!-- 分页 -->
    {% if boxes.paginator.num_pages > 1 %}
    <div class="d-flex justify-content-center mt-4">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if boxes.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_market %}&market_id={{ selected_market }}{% endif %}{% if selected_sort %}&sort={{ selected_sort }}{% endif %}" aria-label="First">
                        <span aria-hidden="true">&laquo;&laquo;</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ boxes.previous_page_number }}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_market %}&market_id={{ selected_market }}{% endif %}{% if selected_sort %}&sort={{ selected_sort }}{% endif %}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% endif %}
                
                {% for num in boxes.paginator.page_range %}
                    {% if num == boxes.number %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                    {% elif num > boxes.number|add:"-3" and num < boxes.number|add:"3" %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_market %}&market_id={{ selected_market }}{% endif %}{% if selected_sort %}&sort={{ selected_sort }}{% endif %}">{{ num }}</a>
                    </li>
                    {% endif %}
                {% endfor %}
                
                {% if boxes.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ boxes.next_page_number }}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_market %}&market_id={{ selected_market }}{% endif %}{% if selected_sort %}&sort={{ selected_sort }}{% endif %}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ boxes.paginator.num_pages }}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_market %}&market_id={{ selected_market }}{% endif %}{% if selected_sort %}&sort={{ selected_sort }}{% endif %}" aria-label="Last">
                        <span aria-hidden="true">&raquo;&raquo;</span>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>

{% block extra_js %}
<script>
    function submitForm() {
        document.getElementById('filterForm').submit();
    }
</script>
{% endblock %}
{% endblock %} 